<!--发房页面-->
<template>
  <div class="app-container" style="min-height: 88.5vh">
    <com-title-item title="房源推送">
      <div class="body fs-sm text-gray">
        <div>1、安居客对于价格偏离均价30%以上的房源可能会做违规处理，这或许会导致您在安居客的房源被删；</div>
        <div>2、安居客、58当日重复推送的房源可能会造成"重复房源"，三网对"重复房源"会被判为"违规房源"；</div>
        <div>3、库存满时，不想自动下架最旧房源，发布时推送设置可以选择"不推广"；</div>
        <div>4、发送普通房源则房源仅有图片与文字描述，发送视频房源则房源有视频、图片与文字描述；</div>
        <div>5、普通推广消耗1个端口资源，主推消耗2个端口资源，不推广则房源为待上架，不消耗端口资源；</div>
      </div>
    </com-title-item>

    <div style="padding: 15px;background:#fff;marginTop:-15px;paddingBottom:100px">
      <el-table
        :data="tableData"
        ref="table"
        style="width: 100%;border:1px solid #dfe6ec;borderBottom:none"
        :header-cell-style="{ background: '#f0f8ff' }"
        @selection-change="changeFun"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="房源网站" width="160">
          <div class="full no-img-box d-flex">
            <img src="@/assets/images/ajk_setting.png" style="height: 40px;width: 90px" />
          </div>
        </el-table-column>
        <el-table-column prop="accounts" label="帐号" width="120"> </el-table-column>
        <el-table-column prop="houseStyle" label="房源类型" width="140">
          <template slot-scope="scope">
            <el-radio-group v-model="houseRadio" class="d-flex fd-column house_style jc-around">
              <el-radio v-for="(item, index) in scope.row.houseStyle" :label="index" :key="index">{{ item }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="spread" label="推广类型" width="200">
          <template slot-scope="scope">
            <el-radio-group v-model="spreadRadio" class="d-flex fd-column house_style jc-around">
              <el-radio v-for="(item, index) in scope.row.spread" :label="item.value" :key="index">{{
                item.title
              }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="port" label="端口库存已满时操作" width="250">
          <template slot-scope="scope">
            <el-radio-group v-model="portRadio" class="d-flex fd-column house_style jc-around">
              <el-radio v-for="(item, index) in scope.row.port" :label="index" :key="index">{{ item }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="房源重复推送处理" min-width="150">
          <template slot-scope="scope">
            <el-radio-group class="d-flex fd-column house_style jc-around" v-model="oprationRadio">
              <el-radio v-for="(item, index) in scope.row.operate" :label="index" :key="index">{{ item }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>

      <el-row class="d-flex jc-end send-button">
        <el-button size="mini" @click="back">上一级</el-button>
        <el-button type="primary" size="mini" @click="send" :disabled="!haveAjkPort">立即推送</el-button>
      </el-row>
    </div>

    <div class="tips-mark" v-show="tips">
      <div class="tips">
        <!-- <div class="d-flex jc-end" @click="tips=false"><i class="el-icon-close"></i></div> -->
        <div class="tips-title">房源已在推送中，请稍后~</div>
        <div class="d-flex jc-end">
          <button class="el-button el-button--default el-button--small" @click="goOn">继续推送</button
          ><button class="el-button el-button--default el-button--small el-button--primary" @click="lookLog">
            查看推送日志
          </button>
        </div>
      </div>
    </div>
    <!-- </template> -->

    <template>
      <div class="tips-mark" v-show="erweima">
        <div class="tips" style="height: 350px;width:460px">
          <div class="d-flex jc-end" @click="erweima = false"><i class="el-icon-close"></i></div>
          <div class="tips-title" style="text-align:center">
            一键发房为更高会员版本功能，普通会员可联系客服申请试用！<br />扫描二维码联系客服~
          </div>
          <div style="display: flex;justify-content: center;margin:-5px 0 10px;">
            <img style="width:180px;height:180px" src="@/assets/images/qr.jpg" alt srcset />
          </div>
          <div class="d-flex jc-center">
            <button class="el-button el-button--default el-button--small el-button--primary" @click="erweima = false">
              我知道了
            </button>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  background: #f6f6f6;
  min-height: 100vh;
  // padding: 0;
  .body {
    // background-color: #f6f6f6;
    // padding: 18px 28px;
    margin-top: 12px;
    line-height: 26px;
  }
  .imgs {
    margin-top: 14px;
    .item {
      margin-right: 20px;
      border-radius: 4px;
      overflow: hidden;
      width: 120px;
      height: 56px;
    }
  }
  .move {
    margin-top: 14px;
    .item {
      margin-bottom: 10px;
    }
    .vr {
      margin-top: 20px;
      .title {
        margin-right: 10px;
      }
      .select {
        margin-right: 30px;
      }
    }
    .comfirm {
      margin-top: 60px;
    }
  }
}
.margin-r {
  margin-right: 15px;
}
.margin-l {
  margin-left: 50px;
}
.house_style .el-radio {
  margin-bottom: 5px;
}
.send-button {
  margin-top: 15px;
}
.tips {
  position: fixed;
  top: 30%;
  left: 35%;
  z-index: 11;
  width: 422px;
  height: 136px;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #606266;

  .tips-title {
    margin: 32px 22px 27px 10px;
  }
}
.tips-mark {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba($color: #000, $alpha: 0.4);
}
.el-icon-close {
  cursor: pointer;
}
</style>
<style lang="scss"></style>
<script>
import { pushHou, isWhiteList, getPortAccountList, getMemberPower, searchDelSummaryInfo } from '../../api/user';

import { throttle } from '@/utils/utilsNew';
import comTitleItem from '../house/com/com-title-item';
import { mapGetters } from 'vuex';
import { isArray } from '@/utils/validate';
import { HOUSE_PUSH } from '@/config/menuId';
import { getPushAblePortList, menuHandler } from '@/handler/menuHandler';
import { PORT_CODE_AJK } from '@/config/house/platform';

export default {
  data() {
    return {
      haveAjkPort: false,
      tableData: [
        {
          accounts: '',
          houseStyle: ['普通房源', '视频房源'],
          // spread: ['普通推广','主推','不推广(待上架)'],
          spread: [
            {
              title: '普通推广',
              value: '0'
            },
            {
              title: '主推',
              value: '1'
            },
            {
              title: '不推广(待上架)',
              value: '-1'
            }
          ],
          port: ['下架最旧房源再推广', '不推广'],
          operate: ['先删除后推送', '不推送', '强制推送']
        }
      ],
      formLabelWidth: '120px',
      houseRadio: 0,
      spreadRadio: '0',
      portRadio: 0,
      oprationRadio: 0,
      checkBoxData: [],
      delList: [],
      tips: false,
      erweima: false,
      portUserId: '',
      isWhite: false,
      delegationType: '',
      isMultiple: false
    };
  },
  methods: {
    deleteAccounts(row) {
      this.$confirm('账号删除之后将无法进行发房，是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
    },
    goAjk() {
      window.open('https://login.anjuke.com/login/form', '_blank');
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleAccounts() {
      this.bindAccounts = true;
    },
    back() {
      this.$router.go(-1);
    },
    changeFun(val) {
      this.checkBoxData = val;
    },
    send() {
      if (this.checkBoxData.length == 0) {
        this.$alert('请选择推送的账号再进行推送～', {
          confirmButtonText: '确定',
          callback: (action) => {}
        });
      } else {
        let pushData = {
          delList: this.delList,
          pushHouVoList: [
            {
              portType: 'AJK',
              houType: this.houseRadio,
              pushType: this.spreadRadio,
              action: this.oprationRadio,
              portLimit: this.portRadio,
              portUserId: this.portUserId
            }
          ],
          delegationType: this.delegationType
        };
        menuHandler.call(this, HOUSE_PUSH, this.delList.length).then(() => {
          pushHou(JSON.stringify(pushData))
            .then(({ errorMessage = '推房失败！', isSuccess, successMessage }) => {
              // 使用次数
              getMemberPower({
                menuId: HOUSE_PUSH,
                agentId: this.sessionUser.id,
                num: this.delList.length
              });

              if (isSuccess) {
                if (this.isMultiple) {
                  this.$confirm(successMessage, '提示', {
                    confirmButtonText: '继续推送',
                    cancelButtonText: '查看日志'
                  })
                    .then(() => {
                      this.goOn();
                    })
                    .catch(() => {
                      this.lookLog();
                    });
                } else {
                  this.tips = true;
                }
              } else {
                this.$alert('<strong>' + errorMessage + '</strong>', {
                  type: 'error',
                  confirmButtonText: '知道了',
                  dangerouslyUseHTMLString: true
                });
              }
            })
            .catch((err) => {
              this.$alert('<strong>' + errorMessage + '</strong>', {
                type: 'error',
                confirmButtonText: '知道了',
                dangerouslyUseHTMLString: true
              });
            });
        });
      }
    },
    goOn() {
      const { delegationType } = this
      this.$store.dispatch('tagsView/delView', this.$route);
      this.$router.replace({
        name: delegationType === 'SALES' ? 'PublishHouseList' : 'rentHouse'
      });
    },
    lookLog() {
      this.$store.dispatch('tagsView/delView', this.$route);
      this.$router.replace({
        name: 'log'
      });
    },
    // async isWhiteList() {
    //   const { isSuccess } = await isWhiteList({
    //     activityCode: 'PORTPUSHHOU'
    //   });
    //   this.isWhite = isSuccess;
    // },
    async getAccountsList() {
      const { content } = await getPortAccountList();
      if (content.length) {
        content.forEach((item) => {
          if (item.portType === PORT_CODE_AJK) {
            this.tableData[0].accounts = item.account;
            this.portUserId = item.portUserId;
          }
        });
      }
    },

    async searchDelSummaryInfo() {
      try {
        const { delList } = this;
        const { content } = await searchDelSummaryInfo({ delIds: delList });
        let isPushVideo = content.some((item) => {
          return item.videoStatus === '10';
        });
        if (isPushVideo) {
          this.houseRadio = 1;
        }
      } catch (error) {}
    }
  },

  components: {
    comTitleItem
  },
  computed: {
    ...mapGetters(['sessionUser'])
  },
  created() {
    if (isArray(this.$route.query.delId)) {
      this.delList = this.$route.query.delId;
      this.delegationType = this.$route.query.delegationType;
      this.isMultiple = true;
    } else {
      this.delList.push(this.$route.query.delId);
      this.delegationType = this.$route.query.delegationType;
    }
    this.searchDelSummaryInfo();

    getPushAblePortList().then((accounts) => {
      this.haveAjkPort = accounts.some((v) => v === this.PORT_CODE_AJK);
    });
  },
  mounted() {
    this.getAccountsList();
    this.send = throttle(this.send.bind(this), 5000);
    // 默认勾选
    this.$refs.table.toggleRowSelection(this.tableData[0]);
  }
};
</script>
